<template>
    <div>
      <div class="input-container">
        <a-space direction="vertical">
          <a-input style="width: 80vh" size="large" @keyup.enter.native="getList(query)" placeholder="根据关键词查询相关演示视频">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
        </a-space>
      </div>
      <br />
      <a-row :gutter="[16, 24]">
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
              <edit-outlined key="setting" />
              <edit-outlined key="edit" />
              <upload-outlined key="ellipsis" />
            </template>
            <a-card-meta title="Card title" description="This is the description">
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </template>
  <script setup>
  import { SearchOutlined, EditOutlined, UploadOutlined } from "@ant-design/icons-vue";
  const query = ref();
  function getList(query) {}
  </script>
  <style scoped>
  .gutter-box {
    padding: 8px 0;
  }
  .input-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    height: 100%; /* 根据需要设置容器高度 */
  }
  </style>
  